<script setup lang="ts">
import ExCard from '../ExCard.vue';

const hdQry = useQuery({
  queryKey: [apis.apiInitHandshake.id],
  queryFn: async () => {
    await sleep(2000);

    if (Math.random() > 0.5)
      return apis.apiInitHandshake(undefined);
    else
      return Promise.reject(new Error('测试错误'));
  },
});

const promise = new Promise((resolve, reject) => {
  setTimeout(() => Math.random() > 0.5 ? resolve(1) : reject(new Error('测试错误')), 3000);
});
const svPropsOfPromise = useSvPropsOfPromise(promise);

const [inviteGameQry, filterParams] = useFilterInfiniteQuery(apis.apiGameList, {
  type_code: {
    value: 'originals',
  },
});
</script>

<template>
  <div>
    <ExCard title="SuspenseView 结合 VueQuery 使用">
      <div class="text-sm text-sys-text-body">
        <p>SuspenseView 组件的重点参数：forceRender、outRender</p>
        <ul>
          <li>forceRender：强制渲染内容，即使没有成功，酌情使用</li>
          <li>outRender：即在成功状态下，所渲染的内容和 SuspenseView 父级是直接父子关系</li>
        </ul>
      </div>
      <div class="mx-auto w-fit">
        <AButton type="primary" size="small" @click="hdQry.refetch()">
          刷新，结果成功/失败
        </AButton>
      </div>
      <TSuspenseView
        v-bind="buildSvPropsOfQuery(hdQry)" class="mt-4 min-h-50 text-sys-text-body"
        loadingClass="min-h-inherit" errorClass="min-h-inherit"
      >
        {{ hdQry.data.value }}
      </TSuspenseView>
    </ExCard>

    <ExCard title="SuspenseView 结合 Promise 使用">
      <TSuspenseView v-bind="svPropsOfPromise">
        <div>Promise 成功</div>
      </TSuspenseView>
    </ExCard>

    <ExCard>
      <div class="grid gap-2">
        <TInfiniteQuery :querier="inviteGameQry">
          <template #default="{ item }">
            <img
              class="block h-10 w-full rounded-2 object-cover op-70"
              :src="$store.app.joinCdnPath(item.image_cover)"
            >
          </template>
          <template #loading>
            <TSkeleton class="grid gap-2">
              <TSkeleton type="rect" />
              <TSkeleton type="rect" />
            </TSkeleton>
          </template>
        </TInfiniteQuery>
      </div>
    </ExCard>
  </div>
</template>
